<template>
  <div>
    <a-breadcrumb separator="">
      <a-breadcrumb-item href="">
        <a-icon type="home" />
      </a-breadcrumb-item>
      <a-breadcrumb-separator>>></a-breadcrumb-separator>

      <a-breadcrumb-item href="">
        <a-icon type="user" />
        <span>Application List</span>
      </a-breadcrumb-item>
      <a-breadcrumb-separator>>></a-breadcrumb-separator>
      <a-breadcrumb-item>
        Application
      </a-breadcrumb-item>
    </a-breadcrumb>

    <a-breadcrumb>
      <a-breadcrumb-item>Ant Design Vue</a-breadcrumb-item>
      <a-breadcrumb-item><a href="">Component</a></a-breadcrumb-item>
      <a-breadcrumb-item>
        <a href="">General</a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="http://www.alipay.com/"
            >
              General
            </a>
          </a-menu-item>
          <a-menu-item>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="http://www.taobao.com/"
            >
              Layout
            </a>
          </a-menu-item>
          <a-menu-item>
            <a
              target="_blank"
              rel="noopener noreferrer"
              href="http://www.tmall.com/"
            >
              Navigation
            </a>
          </a-menu-item>
        </a-menu>
      </a-breadcrumb-item>
      <a-breadcrumb-item>Button</a-breadcrumb-item>
    </a-breadcrumb>

    <a-breadcrumb :routes="routesList">
      <template slot="itemRender" slot-scope="{ route, params, routes, paths }">
        <span v-if="routesList.indexOf(route) === routesList.length - 1">
          {{ route.breadcrumbName }}
        </span>
        <router-link v-else :to="paths.join('/')">
          {{ route.breadcrumbName }}
        </router-link>
      </template>
    </a-breadcrumb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routesList: [
        {
          path: "index",
          breadcrumbName: "home"
        },
        {
          path: "first",
          breadcrumbName: "first",
          children: [
            {
              path: "/general",
              breadcrumbName: "General"
            },
            {
              path: "/layout",
              breadcrumbName: "Layout"
            },
            {
              path: "/navigation",
              breadcrumbName: "Navigation"
            }
          ]
        },
        {
          path: "second",
          breadcrumbName: "second"
        }
      ]
    };
  }
};
</script>
